<template>
	<view class="market">
		<view class="header">
			<view class="search">
				<image src="@/static/images/1.png"></image>
				<input type="text" placeholder="输入关键词搜索">
				<view class="btn">{{$t('market.搜索')}}</view>
			</view>
		</view>
		<view class="tabs_view">
			<view class="tabs_menu">
				<view class="item_view" @click="picker_open('product_type')">
					<view>{{form_text.product_type}}</view>
					<image src="@/static/images/9.png"></image>
				</view>
				<view class="item_view" @click="picker_open('price_sort')">
					<view>{{form_text.price_sort}}</view>
					<image src="@/static/images/9.png"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<uv-waterfall ref="waterfall" v-model="_this.list" :add-time="10" :column-gap="10"
					@changeList="changeList">
					<template v-slot:list1>
						<view>
							<view class="item" v-for="item in data_list.list1" @click="navigate(item)">
								<view class="cover">
									<image :src="item.product_cover" mode="widthFix"></image>
									<view class="label">在售: {{item.total}}</view>
								</view>
								<view class="name">{{item.product_name}}</view>
								<view class="price">
									<view class="unit">$</view>
									<view class="value">{{item.price}}</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:list2>
						<view>
							<view class="item" v-for="item in data_list.list2" @click="navigate(item)">
								<view class="cover">
									<image :src="item.product_cover" mode="widthFix"></image>
									<view class="label">在售: {{item.total}}</view>
								</view>
								<view class="name">{{item.product_name}}</view>
								<view class="price">
									<view class="unit">$</view>
									<view class="value">{{item.price}}</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
		<uv-picker ref="pickerRef" :columns="columns" keyName="name" @confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		orderSellList
	} from "@/request/api";
	import {
		onLoad,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();
	const show = ref(false);

	const type = 1;
	const getList = async () => {
		let data = {
			...form,
			page: _this.page,
			limit: _this.limit,
		}
		let {
			list
		} = await orderSellList(data);

		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};

	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};

	const data_list = reactive({
		list1: [],
		list2: []
	});
	const waterfall = shallowRef();
	const changeList = (e) => data_list[e.name].push(e.value);

	const columns = ref([]);
	const columns_data = {
		product_type: [{
			id: "1",
			name: "藏品"
		}, {
			id: "2",
			name: "盲盒"
		}],
		price_sort: [{
			id: "asc",
			name: "价格升序"
		}, {
			id: "desc",
			name: "价格降序"
		}]
	};
	const form = {
		product_type: "1",
		price_sort: "asc"
	}
	const form_text = reactive({
		product_type: "藏品",
		price_sort: "价格升序"
	});

	const handlePickValueDefault = () => {
		let index = columns_data[key].findIndex(item => item.id == form[key]);
		pickerRef.value.setIndexs([index], true);
	};

	const pickerRef = shallowRef();
	let key = "";
	const picker_open = (value) => {
		key = value;
		columns.value = [columns_data[key]];
		pickerRef.value.open();
		handlePickValueDefault()
	};
	const confirm = (e) => {
		const dataItem = e.value[0];
		form[key] = dataItem.id;
		form_text[key] = dataItem.name;

		_this.page = 1;
		_this.list = [];
		waterfall.value.clear();

		data_list.list1 = [];
		data_list.list2 = [];

		getList();
	};

	onLoad(() => getList());
	const navigate = item => router(`/pages/market/list?id=${item.product_id}&type=${form.product_type}`);
</script>

<style scoped lang="scss">
	$tabsHeight: 130rpx;

	.market {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		overflow: hidden;
		position: relative;

		.header {
			height: $navBarHeight;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.search {
				width: 100%;
				height: 33px;
				border-radius: 16px;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #2F2F2F;
				display: flex;
				align-items: center;

				image {
					width: 18px;
					height: 18px;
				}

				input {
					flex: 1;
					color: #808080;
					font-size: 12px;
					padding-left: 10rpx;
					box-sizing: border-box;
				}

				.btn {
					color: #DDF247;
					font-size: 12px;
				}
			}
		}

		.tabs_view {
			position: relative;

			.tabs_menu {
				height: $tabsHeight;
				padding: 40rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				// justify-content: space-between;

				.item_view {
					width: 210rpx;
					height: 50rpx;
					border-radius: 5rpx;
					margin-right: 20rpx;
					border: 1px solid #CCCCCC;
					padding: 0 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						flex: 1;
						color: #CCCCCC;
						font-size: 24rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 0 4rpx;
						box-sizing: border-box;
					}

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navBarHeight} - #{$tabsHeight} - var(--window-top) - var(--window-bottom));

			.list {
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 335rpx;
					height: 100%;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					padding: 30rpx;
					box-sizing: border-box;
					background: #2F2F2F;
					overflow: hidden;

					.cover {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						image {
							width: 100%;
						}

						.label {
							width: 100rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: 400;
							border-radius: 5rpx;
							padding: 0 12rpx;
							box-sizing: border-box;
							background: rgba(255, 255, 255, 0.1);
							position: absolute;
							left: -10rpx;
							top: 20rpx;
						}
					}

					.name {
						color: #FFFFFF;
						font-size: 28rpx;
						font-weight: 800;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						padding: 20rpx 0;
						box-sizing: border-box;
					}

					.price {

						display: flex;
						align-items: flex-end;

						.unit {
							color: #DDF247;
							font-size: 20rpx;
							font-weight: bold;
						}

						.value {
							color: #DDF247;
							font-size: 26rpx;
							font-family: DINPro;
							padding-left: 8rpx;
							box-sizing: border-box;
						}
					}
				}
			}
		}
	}
</style>